<template>
	<view class="SOdetiles">
		<u-navbar title="派单详情" :background="background" title-color="#FFF" back-icon-color="#fff"></u-navbar>
		<view class="SOdetiles-table">
			<view class="DWD-li">
				<view class="DWD-li-title">派单号</view>
				<view class="DWD-li-text">{{detailsList.ORMTB440CA00||''}}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">结算流水号</view>
				<view class="DWD-li-text">{{detailsList.ORMTB440CC07||''}}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">企业名称</view>
				<view class="DWD-li-text">{{detailsList.ORMTB440CA05||''}}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">客户名称</view>
				<view class="DWD-li-text">{{detailsList.ORMTB440CA03||''}}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">派单客户</view>
				<view class="DWD-li-text">{{detailsList.ORMTB440CN02||''}}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">车牌号</view>
				<view class="DWD-li-text">{{detailsList.ORMTB440CA01||''}}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">派单方式</view>
				<view class="DWD-li-text">
					{{detailsList.ORMTB440CF00=='ZG'?'配送':detailsList.ORMTB440CF00=='LS'?'自买':detailsList.ORMTB440CF00=='DX'?'代下':detailsList.ORMTB440CF00=='QD'?'抢单':''}}
				</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">物料总价</view>
				<view class="DWD-li-text">{{detailsList.ORMTB440CA11_zj||''}}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">物料单价</view>
				<view class="DWD-li-text">{{detailsList.ORMTB440CA08||''}}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">冻结金额</view>
				<view class="DWD-li-text">{{detailsList.ORMTB440CA11||''}}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">派单时间</view>
				<view class="DWD-li-text">{{detailsList.ORMTB440CA19||''}}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">结算时间</view>
				<view class="DWD-li-text">{{detailsList.ORMTB440CC00||''}}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">回执时间</view>
				<view class="DWD-li-text">{{detailsList.ORMTB440CE00||''}}</view>
			</view>
			<view class="DWD-table">
				<view class="DWD-table-left-title">
					<view></view>
					<view>派单</view>
					<view>结算</view>
					<view>回执</view>
				</view>
				<view class="DWD-table-left-flex">
					<view>物料</view>
					<view>{{detailsList.ORMTB440CA07||''}}</view>
					<view>{{detailsList.ORMTB440CC02||''}}</view>
					<!-- <view v-if="detailsList.ORMTB440CF01==5">{{detailsList.ORMTB440CC02||''}}</view> -->
					<view></view>
				</view>
				<view class="DWD-table-left-flex">
					<view>单价</view>
					<view>{{detailsList.ORMTB440CA08||''}}</view>
					<view>{{detailsList.ORMTB440CC03||''}}</view>
					<view></view>
				</view>
				<view class="DWD-table-left-flex">
					<view>重量</view>
					<view>{{detailsList.ORMTB440CA10||0}}</view>
					<view>{{detailsList.ORMTB440CC04||0}}</view>
					<view v-if="detailsList.ORMTB440CF01==5">{{detailsList.ORMTB440CE09||0}}</view>
					<view v-else></view>
				</view>
				<view class="DWD-table-left-flex" v-if="AuthorizationOBJ.ORMTB417CA06==0">
					<view>金额</view>
					<view>***</view>
					<view>***</view>
					<view>***</view>
				</view>
				<view class="DWD-table-left-flex" v-else>
					<view>金额</view>
					<view>{{detailsList.ORMTB440CA11||0}}</view>
					<view>{{detailsList.ORMTB440CC06||0}}</view>
					<view></view>
				</view>
				<!-- <view class="DWD-table-left-flex" v-if="AuthorizationOBJ.ORMTB417CA06==0">
					<view>运费</view>
					<view>***</view>
					<view>***</view>
					<view>***</view>
				</view>
				<view class="DWD-table-left-flex" v-else>
					<view>运费</view>
					<view>{{detailsList.ORMTB440CA12||0}}</view>
					<view>{{detailsList.jsORMTB440CA12||0}}</view>
					<view v-if="detailsList.ORMTB440CF01==5">{{detailsList.ORMTB440CE10||0}}</view>
					<view v-else></view>
				</view> -->
			</view>
			<view class="" style="margin-top: 20rpx;" @click="picClick"
				v-if="detailsList.ORMTB440CF01==4||detailsList.ORMTB440CF01==5">
				<u-image width="200" height="200" :src="detailsList.ORMTB440CE01"></u-image>
			</view>
			<view class="" style="margin-top: 20rpx; display: flex;" @click="picBDClick"
				v-if="detailsList.ORMTB440CL01">
				<span>磅单：</span>
				<!-- <u-image width="200" height="200" :src="detailsList.ORMTB440CL01"></u-image> -->
				<image :src="detailsList.ORMTB440CL01" mode="aspectFill"
					style="width: 120rpx;height: 120rpx;">
				</image>
			</view>
			<view class="DWD-btn">
				<button
					v-if="(detailsList.ORMTB440CF01==0||detailsList.ORMTB440CF01==1)&&userinfo.sign == 'CUS-1'&&detailsList.ORMTB440CH01=='1'"
					@click="serve('-1')" type="default">取消订单</button>
				<button
					v-if="(detailsList.ORMTB440CF01==0||detailsList.ORMTB440CF01==1)&&(userinfo.sign == 'CUS-3'||userinfo.sign == 'CUS-2')&&detailsList.ORMTB440CH01=='1'"
					@click="serve('-1')" type="default">申请取消</button>
				<button class="DWD-btn-color"
					v-if="detailsList.ORMTB401CA01==='ZJ'&&(detailsList.ORMTB440CF01>=0&&detailsList.ORMTB440CF01<3)&&detailsList.ORMTB440CH01=='1'"
					@click="showComplete=true" type="default">完成订单</button>
			</view>
		</view>

		<u-toast ref="uToast" />
		<view class="" style="width: 100vw; height: 100vh;">
			<previewImage :saveBtn='false' :rotateBtn='false' ref="previewImage" :imgs="detailsList.imgList">
			</previewImage>
		</view>

		<u-popup v-model="showComplete" mode="center" :mask-close-able="false" border-radius="10" closeable width="90%">
			<view class="" style="overflow: hidden;">
				<view class="popup_title">请输入完成订单信息</view>
				<view class="popup_cell">
					<view class="popup_cell-label">派单物料:</view>
					<view class="popup_cell-value">
						<input class="popup_cell_input" type="text" v-model="detailsList.ORMTB440CA07" disabled />
					</view>
				</view>
				<view class="popup_cell">
					<view class="popup_cell-label">单价:</view>
					<view class="popup_cell-value">
						<input v-model="detailsList.ORMTB440CA08" @input="weightInput($event,'price')"
							class="popup_cell_input" type="number" :placeholder="detailsList.ORMTB440CA08" />
					</view>
				</view>
				<view class="popup_cell">
					<view class="popup_cell-label">毛重:</view>
					<view class="popup_cell-value">
						<input v-model="weightOpt.gross" @input="weightInput($event,'gross')" class="popup_cell_input"
							type="number" placeholder="请输入毛重" />
					</view>
				</view>
				<view class="popup_cell">
					<view class="popup_cell-label">皮重:</view>
					<view class="popup_cell-value">
						<input v-model="weightOpt.tare" @input="weightInput($event,'tare')" class="popup_cell_input"
							type="number" placeholder="请输入皮重" />
					</view>
				</view>
				<view class="popup_cell">
					<view class="popup_cell-label">净重:</view>
					<view class="popup_cell-value">
						<input v-model="form.ORMTB440CC04" class="popup_cell_input" type="text" placeholder="毛重-皮重"
							disabled />
					</view>
				</view>
				<view class="popup_cell">
					<view class="popup_cell-label">金额:</view>
					<view class="popup_cell-value">
						<input v-model="form.ORMTB440CC06" class="popup_cell_input" type="text" placeholder="单价*净重"
							disabled />
					</view>
				</view>
				<view class="popup_cell upload_area">
					<view class="popup_cell-label">上传磅单:</view>
					<view v-if="base64" class="upload_wrap">
						<image @click="previewImagePounds" :src="base64" mode="aspectFill"
							style="width: 120rpx;height: 120rpx;">
						</image>
					</view>
					<view @click="showActionSheet" class="upload_wrap">
						<u-icon name="camera-fill" size="120"></u-icon>
					</view>
				</view>
				<button @click="serve('3')" class="popup_btn">确定</button>
			</view>
		</u-popup>

		<u-modal v-model="submitShow" :show-cancel-button="true" @confirm="submitConfirm">
			<view class="slot-content">
				请确认是否{{text}}该订单
			</view>
		</u-modal>
	</view>
</template>

<script>
	import { pathToBase64,base64ToPath } from '@/js_sdk/image-tools/index.js'
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'
	import qs from 'qs'
	export default {
		components: {
			previewImage
		},
		data() {
			return {
				image: '',
				background: {
					backgroundColor: '#00a1f1',
				},
				id: '',
				detailsList: '',
				type: '',
				userinfo: JSON.parse(uni.getStorageSync('userinfo')),
				submitShow: false,
				text: '',
				AuthorizationOBJ: '',
				showComplete: false,
				weightOpt: {
					gross: '', // 毛重
					tare: '', // 皮重
				},
				form: {
					ORMTB440CC02: '', // 派单物料名称
					ORMTB440CC04: '', // 净重
					ORMTB440CC06: '', // 结算金额
				},
				base64: '', // 图片base64
				ocrRes: false
			}
		},
		watch: {
			weightOpt: {
				handler() {
					let { gross, tare } = this.weightOpt
					if (gross && tare) {
						this.form.ORMTB440CC04 = (parseFloat(gross) - parseFloat(tare)).toFixed(2)
						this.$u.debounce(this.getSettlementAmount, 500)
					} else this.form.ORMTB440CC04 = ''
				},
				deep: true
			},
			showComplete() {
				if (!this.showComplete) {
					this.base64 = ''
					this.weightOpt.gross = ''
					this.weightOpt.tare = ''
					this.form.ORMTB440CC06 = ''
				}
			}
		},
		onLoad(option) {
			if (this.userinfo.sign == 'CUS-3') {
				this.queryAuthorization()
			}
			this.id = option.ORMTB440ID
			this.querOrder()
		},
		mounted() {},
		methods: {
			// 预览磅单
			async previewImagePounds() {
				let path = await base64ToPath(this.base64)
				uni.previewImage({
					current: 0,
					urls: [path],
					success() {}
				})
			},
			async picBDClick(){
				uni.previewImage({
					current: 0,
					urls: [this.detailsList.ORMTB440CL01],
					success() {}
				})
			},
			async showActionSheet() {
				let [err, res] = await uni.showActionSheet({
					itemList: ['从手机相机选择', '拍一张']
				})
				if (res) {
					res.tapIndex === 0 && this.chooseImage('album')
					res.tapIndex === 1 && this.chooseImage('camera')
				}
			},
			async chooseImage(sourceType) {
				let [err, res] = await uni.chooseImage({
					count: 1,
					sourceType: [sourceType],
				});
				if (res) {
					this.base64 = await pathToBase64(res.tempFilePaths[0])
					this.uploadPounds()
				}
			},
			// 上传磅单图片
			async uploadPounds() {
				try {
					uni.showLoading({ title: '正在加载', mask: true })
					let { base64 } = this
					let [err, res] = await uni.request({
						url: `${this.baseUrl}/orm/ormtb440/poundListIdentification`,
						method: 'POST',
						dataType: 'json',
						header: { 'content-type': 'application/x-www-form-urlencoded' },
						data: qs.stringify({ image: base64 }),
					})
					if (res) {
						if (res.data.code === 200) {
							let result = res.data.data
							if (JSON.stringify(result) == "{}") {
								return uni.showToast({ title: '磅单识别失败', icon: 'none' })
							}
							this.ocrRes = true
							this.weightOpt.gross = res.data.data.gross ? res.data.data.gross : ''
							this.weightOpt.tare = res.data.data.tare ? res.data.data.tare : ''
						} else {
							uni.showToast({ title: '磅单识别失败', icon: 'none' })
						}
					}
				} catch (e) {}
				uni.hideLoading()
			},

			openConfirmPopup() {
				this.type = 3
				this.showComplete = true
			},

			weightInput(e, type) {
				let value = e.target.value
				value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
				value = value.replace(/^\./g, ""); //验证第一个字符是数字
				value = value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
				value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
				if (value.indexOf(".") < 0 && value != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
					value = parseFloat(value)
				}
				setTimeout(() => {
					this.$set(this.weightOpt, type, value)
				}, 0)
			},
			queryAuthorization() { //查询子账户权限
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				uni.request({
					url: this.baseUrl + '/orm/ormtb417/selectAccess/' + this.userinfo.ORMTB417ID,
					method: 'GET',
					success: (res) => {
						uni.hideLoading();
						if (res.data.code == 200) {
							this.AuthorizationOBJ = res.data.data
						} else {
							this.$refs.uToast.show({
								title: res.data.message,
								type: 'default',
								icon: false
							})
						}
					},
					fail: (res) => {
						uni.hideLoading();
						this.$refs.uToast.show({
							title: res.errMsg,
							type: 'default',
							icon: false
						})
					}
				});
			},
			picClick() {
				this.$refs.previewImage.open(0);
			},
			// 获取结算金额
			async getSettlementAmount() {
				// let ORMTB440CC04 = ''
				// if (this.detailsList) {
				// 	ORMTB440CC04 = (parseFloat(this.detailsList.ORMTB440CA08) * parseFloat(this.form
				// 		.ORMTB440CC04).toFixed(2))
				// }
				// if (!ORMTB440CC04) return
				uni.showLoading({ mask: true })
				let [err, res] = await uni.request({
					url: this.baseUrl + '/orm/ormtb440/orderCompleteBefore',
					method: 'POST',
					dataType: 'json',
					data: {
						ORMTB440CA02: this.detailsList.ORMTB440CA02,
						ORMTB440CA04: this.detailsList.ORMTB440CA04,
						ORMTB440CC03: this.detailsList.ORMTB440CA08,
						ORMTB440CC04: this.form.ORMTB440CC04
					}
				})
				uni.hideLoading()
				if (res && res.data.code === 200) {
					this.form.ORMTB440CC06 = res.data.data
				}
			},
			// 确认完成订单
			async confirmOrderComplete() {
				uni.showLoading({ title: '正在加载', mask: true });
				uni.request({
					url: this.baseUrl + '/orm/ormtb440/orderComplete',
					method: 'POST',
					dataType: 'json',
					data: {
						ORMTB440ID: this.detailsList.ORMTB440ID, // 主键
						ORMTB440CA00: this.detailsList.ORMTB440CA00, // 客户id
						ORMTB440CC01: this.detailsList.ORMTB440CA06, // 结算物料id
						ORMTB440CC02: this.detailsList.ORMTB440CA07, // 结算物料名称
						ORMTB440CC03: this.detailsList.ORMTB440CA08, // 结算单价
						ORMTB440CC04: this.form.ORMTB440CC04, //  结算净重
						ORMTB440CC05: this.weightOpt.gross, // 毛重
						ORMTB440CC06: this.form.ORMTB440CC06, // 结算金额
						ORMTB440CH05: this.base64,
						sign: this.userinfo.sign,
					},
					success: (res) => {
						uni.hideLoading();
						if (res.data.code == 200) {
							uni.navigateBack({
								delta: 1
							})
						} else {
							this.$refs.uToast.show({
								title: res.data.message,
								type: 'default',
								icon: false
							})
						}
					},
					fail: (res) => {
						uni.hideLoading();
						this.$refs.uToast.show({
							title: res.errMsg,
							type: 'default',
							icon: false
						})
					}
				});
			},
			submitConfirm() {
				if (this.type == 3) {
					this.confirmOrderComplete()
					return
				}
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				uni.request({
					url: this.baseUrl + '/orm/ormtb440/updateORMTB440CF01',
					method: 'POST',
					dataType: 'json',
					data: {
						ORMTB440CE08: this.userinfo.PERTB005CA02,
						ORMTB440ID: this.detailsList.ORMTB440ID,
						ORMTB430ID: this.detailsList.ORMTB430ID,
						ORMTB440CF01: this.type,
						ORMTB440CD01: '',
						ORMTB440CA02: this.detailsList.ORMTB440CA02,
						ORMTB440CA11: this.detailsList.ORMTB440CA11,
						ORMTB440CA12: this.detailsList.ORMTB440CA12,
						sign: this.userinfo.sign,
					},
					success: (res) => {
						uni.hideLoading();
						if (res.data.code == 200) {
							uni.navigateBack({
								delta: 1
							})
						} else {
							this.$refs.uToast.show({
								title: res.data.message,
								type: 'default',
								icon: false
							})
						}
					},
					fail: (res) => {
						uni.hideLoading();
						this.$refs.uToast.show({
							title: res.errMsg,
							type: 'default',
							icon: false
						})
					}
				});
			},
			serve(type) {
				if (this.AuthorizationOBJ.ORMTB417CA05 && this.AuthorizationOBJ.ORMTB417CA05 == 0) {
					uni.showToast({
						title: '您没有操作权限',
						duration: 5000,
						icon: 'none',
					});
					return
				}
				this.submitShow = true
				this.type = type
				if (type == '-1') {
					this.text = '取消'
				} else if (type == '-2') {
					this.text = '申请取消'
				} else if (type == '3') {
					this.text = '完成'
				}
			},
			querOrder() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.detailsList = ''
				uni.request({
					url: this.baseUrl + '/orm/ormtb440/selectDetails',
					method: 'POST',
					dataType: 'json',
					data: {
						ORMTB440ID: this.id,
					},
					success: (res) => {
						uni.hideLoading();
						if (res.data.code == 200) {
							this.detailsList = res.data.data
							this.detailsList.imgList = []
							if (this.detailsList.ORMTB440CE01) {
								this.detailsList.imgList.push(this.detailsList.ORMTB440CE01)
							}
						} else {
							this.$refs.uToast.show({
								title: res.data.message,
								type: 'default',
								icon: false
							})
						}
					},
					fail: (res) => {
						uni.hideLoading();
						this.$refs.uToast.show({
							title: res.errMsg,
							type: 'default',
							icon: false
						})
					}
				});
			}
		}
	}
</script>

<style scoped>
	.popup_cell-photo {
		margin: 0 30rpx;
	}

	.photo {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}

	.photo-img {
		width: 300rpx;
		height: 200rpx;
	}

	.photo-img2 {
		width: 400rpx;
		height: 400rpx;
	}

	.SOdetiles-table {
		/* padding: 30rpx 40rpx 0; */
	}

	.DWD-li {
		display: flex;
		height: 70rpx;
		line-height: 70rpx;
		box-sizing: border-box;
		border: 1rpx solid #F2F2F2;
		font-size: 32rpx;
		color: #333;
	}

	.DWD-li>view {
		padding: 0 15rpx;
		height: 70rpx;
		overflow: hidden;
		box-sizing: border-box;
	}

	.DWD-li-title {
		width: 200rpx;
		text-align: center;
		border-right: 1rpx solid #F2F2F2;
		background-color: rgba(0, 163, 255, .1);
	}

	.DWD-li+.DWD-li {
		border-top: none;
	}

	.DWD-table {
		display: flex;
	}

	.DWD-table-left-flex {
		flex: 1;
	}

	.DWD-table>view>view {
		padding: 0 15rpx;
		height: 70rpx;
		line-height: 70rpx;
		overflow: hidden;
		text-align: center;
		border-right: 1rpx solid #F2F2F2;
		border-bottom: 1rpx solid #F2F2F2;
		box-sizing: border-box;
	}

	.DWD-table>view>view:first-child {
		background-color: rgba(0, 163, 255, .1);
	}

	.DWD-table-left-title>view {
		width: 101rpx;
		text-align: center;
		background-color: rgba(0, 163, 255, .1);
	}

	.DWD-table .DWD-table-left-title>view {
		padding: 0 5rpx;
		height: 70rpx;
		line-height: 70rpx;
		overflow: hidden;
		box-sizing: border-box;
		border-left: 1rpx solid #F2F2F2;
		border-bottom: 1rpx solid #F2F2F2;
	}

	.DWD-btn {
		margin: 70rpx 100rpx 0;
		padding-bottom:30rpx;
	}

	.DWD-btn button {
		background-color: #FF0000;
		color: #FFF;
		font-size: 30rpx;
	}

	.DWD-btn button+button {
		margin-top: 30rpx;
	}

	.DWD-btn .DWD-btn-color {
		background-color: #007AFF;
	}

	.slot-content {
		padding: 20rpx 40rpx;
	}

	.popup_title {
		font-size: 36rpx;
		font-weight: 700;
		text-align: center;
		padding: 30rpx;
	}

	.popup_cell {
		margin: 0 30rpx;
		padding: 10rpx 0;
		margin-bottom: 10rpx;
		border-bottom: 2rpx solid #ebebeb;
		display: flex;
		align-items: center;
	}

	.popup_cell.upload_area {
		align-items: flex-start;
	}

	.upload_wrap {
		margin-left: 32rpx;
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.upload_img {}

	.upload_placeholder {}

	.popup_cell-label {
		font-size: 30rpx;
		color: #666666;
		width: 150rpx;
		text-align: right;
	}

	.popup_cell_value {
		flex: 1;
	}

	.popup_cell_input {
		font-size: 32rpx;
		width: 100%;
		height: 60rpx;
		padding: 0 20rpx;
	}

	.input-placeholder {
		font-size: 30rpx;
	}

	.popup_btn {
		background-color: #007AFF;
		margin: 60rpx;
		color: #FFFFFF;
	}
</style>
